<template>
  <div class="environment-company">
    <div class="environment-header">
      <p class="title left color" v-if="projectRouteId">
        <span @click="back" class="color">环境监测</span>
        <span> > </span>
        <span>{{$route.query.projectName}}</span>
      </p>
      <div class="right">
        <button class="button-block mr10" v-if="projectManageMmaintain" @click="set">阈值设置</button>
        <button class="button-block mr20" @click="getData">刷新</button>
        <span class="mr5">监测点</span>
        <zz-select
          class="inline mr10"
          :border= true
          :options="{width: '170px'}"
          :option="viewList"
          :name = 'locationName'
          @optionClick="viewCallback"></zz-select>
      </div>
    </div>

    <div class="project-table">
      <div class="table-left">
        <p class="tableP"><span><b>环境监测</b></span></p>
        <div class="table-border mt15">
          <div class="clear">
            <div class="left" style="width: 33.3%; height: 325px" ref="gaugeEnvironment"></div>
            <div class="left" style="width: 33.3%; height: 325px" ref="gaugePMEnvironment"></div>
            <div class="left" style="width: 33.3%; height: 325px" ref="gaugeTSPEnvironment"></div>
          </div>
          <div class="gauge-bottom">
            <div class="left" :style="{width: `${100 / 3}%`}">
              <p class="left">
                <i class="iconfont icon-app_icons-"></i>
                <span class="v-top">噪音</span>
              </p>
              <p class="right gauge-p">{{projectEnvironmentData.noise || '--'}}dB</p>
            </div>
            <div class="left" :style="{width: `${100 / 3}%`}">
              <p class="left">
                <i class="iconfont icon-iconset0480"></i>
                <span class="v-top">温湿度</span>
              </p>
              <p class="right gauge-p">{{projectEnvironmentData.temperature || '--'}}℃/{{projectEnvironmentData.humidity || '--'}}%</p>
            </div>
            <div class="left" :style="{width: `${100 / 3}%`}">
              <p class="left">
                <i class="iconfont icon-fengsu"></i>
                <span class="v-top">风速</span>
              </p>
              <div class="right" style="line-height: 20px">
                <p class="gauge-p">{{projectEnvironmentData.windSpeed || '--'}}m/s</p>
                <small v-if="projectEnvironmentData.windSpeed">{{projectEnvironmentData.windDirection}}</small>
                <small v-else>无</small>
              </div>
            </div>
          </div>
        </div>

        <div class="mt20">
          <p class="tableP"><span><b>天气预报</b></span></p>
          <div class="table-border clear mt15">
            <div class="weather" v-if="weatherList.length > 0" v-for="item in weatherList" :style="{width: `${100 / 4}%`}">
              <p class="weather-head">{{item.time}}(<span :class="{saturday: item.week === '星期六', Sunday: item.week === '星期日'}">{{item.week}}</span>)</p>
              <div class="weather-content">
                <zz-weather :weatherType="item.weather" fontSize="30px" color="#22a6b5"></zz-weather>
                <p style="margin: 15px 0 20px 0">{{item.weather}}</p>
                <p>{{item.temperature}}</p>
              </div>
            </div>
            <div class="weather" v-else>暂无天气预报</div>
          </div>
        </div>
      </div>
      <div class="table-right">
        <p class="tableP"><span><b>监测统计</b></span></p>
        <div class="table-right-echart">
          <div style="width: 100%; height: 240px" ref="dust"></div>
          <div style="width: 100%; height: 240px; margin-top: 30px" ref="noise"></div>
          <router-link :to="{name: 'projectDetailEnvironment', query: {referId: referId, referName: locationName, projectId: this.projectRouteId, projectName: $route.query.projectName}}">
            <button class="button-block mt20" style="width: 100%">查看更多统计</button>
          </router-link>
        </div>
      </div>
      <!-- 阈值设置 -->
      <set :showDialog='showDialog' @close = "showDialog = false"></set>
    </div>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import PM2Gauge from './PM2Gauge.js'
  import PM10Gauge from './PM10Gauge.js'
  import TSPGauge from './TSPGauge.js'
  import dust from './dust.js'
  import noise from './noise.js'
  import set from './set.vue'
  import { getEnvirMonitorInfo, getMonitorInfo, getWeatherForecastInfo, getDeviceDustDataLastSevenDay } from '@/service/api.js'
  export default {
    name: 'project',
    components: {
      set
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        projectRouteId: '',
        projectManageMmaintain: true,
        viewList: {},
        groupParams: {},
        projectEnvironmentData: {},
        showDialog: false,
        locationName: '',
        referId: '',
        referName: '',
        dustWorksumbydayVOS: [],
        dialogTitle: '环境监测阈值设置',
        weatherList: []
      }
    },
    mixins: [PM2Gauge, PM10Gauge, TSPGauge, dust, noise],
    mounted () {
      this.projectRouteId = this.$route.query.projectId || ''
      this.getAuth()
      this.getData()
    },
    methods: {
      back () {
        this.$router.push({name: 'companyEnvironment'})
      },
      getAuth () {
        let menus = this.$local.get('childMenus')
        if (menus) {
          // 是否拥有项目维护权限
          this.projectManageMmaintain = menus.some((item) => item.funCode === 'p_EnvMonitor_maintain')
        }
      },
      async getData () {
        await this.getMonitorList()
        await this.getWeatherForecast()
        await this.getEnvironmentInfo()
        this.initPM2GaugeEchart()
        this.initPM10GaugeEchart()
        this.initTSPGaugeEchart()
        await this.getDeviceDustData()
        this.initDust()
        this.initNoise()
      },
      getMonitorList () {
        return new Promise(resolve => {
          getMonitorInfo({
            projectId: this.projectRouteId,
          }).then( res => {
            let items = res.data.sort(this.compare('isOnline'))
            items.forEach((item, index) => {
              if (index === 0 && !this.referId) {
                this.locationName = `${item.location}(在线)`
                this.referId = item.referId
              }
              this.viewList[item.referId] = `${item.location}${item.isOnline ? '(在线)' : '(离线)'}`
            })
            if (res.data.length === 0) {
              this.$message.warning('该项目没有监测点')
            }
            resolve()
          }).catch( err => {
            console.log(err)
          })
        })
      },
      compare (property) {
        return function (a, b) {
          return b[property] - a[property]
        }
      },
      getEnvironmentInfo () {
        return new Promise(resolve => {
          if (this.referId) {
            getEnvirMonitorInfo({
              projectId: this.projectRouteId,
              referId: this.referId
            }).then( res => {
              if (res.data) {
                this.projectEnvironmentData = res.data
                this.groupParams = this.projectEnvironmentData.groupParams
              }
              resolve()
            }).catch( err => {
              console.log(err)
            })
          } else {
            resolve()
          }
        })
      },
      getWeatherForecast () {
        return new Promise(resolve => {
          if (this.referId) {
            getWeatherForecastInfo({
              projectId: this.projectRouteId,
              referId: this.referId
            }).then( res => {
              this.weatherList = []
              if (res.data) {
                let today = this.$moment().format('MM-DD')
                let week = this.$moment().format('dddd')
                let first = this.$moment().add(1, 'days').format('MM-DD')
                let firstWeek = this.$moment().add(1, 'days').format('dddd')
                let second = this.$moment().add(2, 'days').format('MM-DD')
                let secondWeek = this.$moment().add(2, 'days').format('dddd')
                let third = this.$moment().add(3, 'days').format('MM-DD')
                let thirdweek = this.$moment().add(3, 'days').format('dddd')
                this.weatherList.push({time: today, week: week, weather: res.data.imgTitle, temperature: res.data.temperature})
                this.weatherList.push({time: first, week: firstWeek, weather: res.data.firstImgTitle, temperature: res.data.firstTemp})
                this.weatherList.push({time: second, week: secondWeek, weather: res.data.secondImgTitle, temperature: res.data.secondTemp})
                this.weatherList.push({time: third, week: thirdweek, weather: res.data.thirdImgTitle, temperature: res.data.thirdTemp})
              }
              resolve()
            }).catch( err => {
              console.log(err)
            })
          } else {
            resolve()
          }
        })
      },
      getDeviceDustData () {
        return new Promise(resolve => {
          if (this.referId) {
            getDeviceDustDataLastSevenDay({
              projectId: this.projectRouteId,
              referId: this.referId
            }).then( res => {
              this.dustWorksumbydayVOS = res.data.dustWorksumbydayVOS
              resolve()
            }).catch( err => {
              console.log(err)
            })
          }
        })
      },
      viewCallback (item) {
        this.referId = item.key
        this.locationName = item.value
        this.getData()
      },
      // 阈值设置
      set () {
        this.showDialog = true;
      },
      close () {
        this.showDialog = false
      }
    }
  }
</script>

<style scoped lang='scss'>
  .environment-company{
    .environment-header{
      height: 60px;
      line-height: 30px;
      padding: 15px 20px 17px 20px;
      box-sizing: border-box;
      border-bottom: 1px $color-line solid;
    }
    .content-header{
      height: 60px;
      padding: 20px 20px 10px 20px;
      line-height: 30px;
      box-sizing: border-box;
    }
    .project-table{
      display: table;
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      .table-left{
        width: 65%;
        display: table-cell;
        padding-right: 20px;
      }
      .table-right{
        display: table-cell;
        vertical-align: top;
        width: 35%;
        .table-right-echart{
          margin-top: 15px;
          width: 100%;
          height: 638px;
          border: 1px $color-line solid;
          padding: 20px;
          box-sizing: border-box;
        }
      }
      .table-border{
        border: 1px $color-line solid;
      }

      .weather{
        float: left;
        text-align: center;
        .weather-head{
          padding: 25px 0;
          border-bottom: 1px $color-line solid;
          .saturday{
            color: rgba(129, 184, 210, 1);
          }
          .Sunday{
            color: rgba(220, 99, 99, 1);
          }
        }
        .weather-content{
          padding: 10px 0 20px 0;
        }
      }
      .gauge-bottom{
        height: 60px;
        line-height: 40px;
        padding: 10px 0;
        box-sizing: border-box;
        border-top: 1px $color-line solid ;
        background: $color-bg;
        >div{
          height: 100%;
          box-sizing: border-box;
          // padding: 0 40px;
          border-right: 1px $color-line solid;
          &:last-child{
            border-right: none;
          }
          .iconfont{
            color: $color;
          }
          .icon-app_icons-{
            font-size: 24px;
          }
          .icon-iconset0480{
            font-size: 32px;
          }
          .icon-fengsu{
            font-size: 32px;
          }
          .gauge-p{
            color: $color;
            font-weight: bolder;
            font-size: 19px;
            word-break:keep-all;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
          }
          .left {
            width: 50%;
            text-align: center;
            word-break:keep-all;
            white-space:nowrap;
            overflow:hidden;
          }
          .right {
            width: 50%;
            text-align: center;
          }
        }
      }
    }
  }
</style>
